require('../../less/controls/uploader.less');
var React = require('react');
var Input = require('./Input');
module.exports = React.createClass({
	displayName:'Uploader',
	getInitialState:function(){
		return {
			hiddens: this.props.hiddens||{},
			value: this.props.value
		}
	},
	componentDidMount:function(){

	},
	setHidden: function (key, value){
		this.state.hiddens[key] = value;
		this.setState({
			hiddens: this.state.hiddens
		});
	},
	__onIFrameLoad: function (event){
		var _target = event.target,
			_data = '';
		if (_target.contentWindow) {
			_data = _target.contentWindow.document.body ? _target.contentWindow.document.body.innerHTML : null;
        } else if (_target.contentDocument) {
			_data = _target.contentDocument.document.body ? _target.contentDocument.document.body.innerHTML : null;
        }
	},
	__onInputChange: function (){

	},
	render:function(){
		this._items = [];
		var _hiddens = this.state.hiddens||{};
		return (
			<form
				className="c-uploader"
				target="uploader-target"
				encType="multipart/form-data"
				action={this.props.action}
				method={this.props.method}
				style={this.props.style}>
				<iframe onLoad={this.__onIFrameLoad} className="uploader-target" name="upload-target" />
				<Input type="file" onInputChange={this.__onInputChange} />
				{
					Object.keys(_hiddens).map(function (hidden, index){
						return <input key={'hidden_' + index} type="hidden" name={hidden} value={_hiddens[hidden]} />;
					})
				}
			</form>
		);
	}
});
